<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-table :data="orderList" >
                    <el-table-column width="70px">
                        <template #default="scope" >
                            <i class="iconfont icon-dingdan1" style="color: red;font-size: 30px "
                                v-if="scope.row.ostate == 1"></i>
                            <i class="iconfont icon-dingdan2" style="color: #79bbff; font-size: 35px"
                                v-if="scope.row.ostate == 2"></i>
                            <i class="iconfont icon-dingdan3" style="color:#67C23A;font-size: 30px"
                                v-if="scope.row.ostate == 3"></i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="oid" label="编号" width="60px" />
                    <el-table-column prop="otime" label="下单时间" width="110px" />
                    <el-table-column prop="oname" label="订单内容" align="center" />
                    <el-table-column prop="ousername" label="下单用户名称" width="110px" />
                    <el-table-column prop="ophone" label="下单电话" width="100px" />
                    <el-table-column prop="oprice" label="订单价格" width="90px" />
                    <el-table-column prop="bid" label="商家" width="80px" >
                        <template #default="scope">
                            <el-tag type="primary" v-if="scope.row.bid == 1">美团</el-tag>
                            <el-tag type="primary" v-else-if="scope.row.bid == 2">饿了么</el-tag>
                            <el-tag type="primary" v-else>携程</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ostart" label="入住时间" width="110px" />
                    <el-table-column prop="oend" label="退房时间" width="110px" />
                    <el-table-column prop="ostate" label="状态" width="90px" align="center">
                        <template #default="scope">
                            <el-tag type="danger" v-if="scope.row.ostate == 1">未处理</el-tag>
                            <el-tag type="success" v-else-if="scope.row.ostate == 2">已预定</el-tag>
                            <el-tag type="info" v-else>已完成</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-popover placement="right" :width="400" trigger="hover">
                                <template #reference>
                                    <el-button size="small" v-if="scope.row.ostate == 3" disabled type="primary">
                                        预定房间
                                    </el-button>
                                    <el-button size="small" type="primary" @click="allRoomDialog(scope.row.oid)">
                                        预定房间
                                    </el-button>
                                </template>
                                <el-table :data="scope.row.rooms">
                                    <el-table-column property="rname" label="房间名" />
                                    <el-table-column property="rnumber" label="房号" />
                                </el-table>
                            </el-popover>
                            <el-button size="small" v-if="scope.row.ostate == 3" disabled type="info">
                                完成
                            </el-button>
                            <el-button size="small" v-else type="info" @click="updateOstate(scope.row.oid)">
                                完成
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>

    <!-- 预定房间对话框开始 -->
    <el-dialog v-model="setRoomShow" title="预定房间">
        <el-transfer v-model="selectedRids" :data="allRoomList" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="setRoomShow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="insertOidAndRid">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 预定对话框结束 -->
</template>
<script setup>
import orderApi from '@/api/orderApi';
import { ref } from 'vue';

import { ElMessage, ElMessageBox } from 'element-plus';

const setRoomShow = ref(false);
//被选中的房间
const selectedRids = ref([]);
//需要分配房间的订单
const selectedOid = ref(0)
const allRoomList = ref([]);
//所有订单
const orderList = ref([])

//完成订单
function updateOstate(oid) {
    ElMessageBox.confirm(
        '确认完成该订单?',
        '完成订单',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            orderApi.updateOstate(oid)
                .then(resp => {
                    if (resp.code == 10000) {
                        ElMessage({
                            message: resp.msg,
                            type: 'success',
                            duration: 1500
                        })
                        selectAll();
                    } else {
                        ElMessage({
                            message: resp.msg,
                            type: 'error',
                            duration: 1500
                        });
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消',
            })
        })
}
//预定房间
function insertOidAndRid() {
    orderApi.insertOidAndRid(selectedOid.value, selectedRids.value)
        .then(resp => {
            //弹出消息
            ElMessage.success(resp.msg);
            //隐藏对话框
            setRoomShow.value = false;
            selectAll();
        })
}
//查询所有可入住房间
function allRoomDialog(oid) {
    orderApi.allRoom(oid)
        .then(resp => {
            allRoomList.value = resp.data.allRoomList;
            selectedRids.value = resp.data.selectedRids;
            selectedOid.value = oid;
            setRoomShow.value = true;


        })
}
//查询所有订单信息
function selectAll() {
    orderApi.selectAll()
        .then(resp => {
            orderList.value = resp.data;
        })
}
selectAll();
</script>
<style scoped></style>